import "./ZTlogin.css";
import { UserOutlined, LockOutlined, } from '@ant-design/icons';
import { Form, Button, Input, message } from "antd";
import api from '../../api/index';
import ThirdPartyLogin from './ThirdPartyLogin';
import { useNavigate } from 'react-router-dom';
import { useEffect, useState } from "react";

function Account() {
    interface User {
        username: string;
        avatar?: string;
    }
    const navigator = useNavigate();
    const [messageApi, contextHolder] = message.useMessage();
    const [user, setUser] = useState<User | null>(null);
    const onFinish = async (values: any) => {
        try {
            const response = await api.post('/login', values);
            localStorage.setItem('user', JSON.stringify(response.data.data));
            navigator('/CXF')
            messageApi.open({
                type: 'success',
                content: response.data.message,
            });
        } catch (error: any) {
            messageApi.open({
                type: 'error',
                content: error.response?.data?.message || '请求异常，请稍后重试'
            });
        }
    };
    const loginout = () => {
        localStorage.removeItem('user');
        setUser(null);
    }
    useEffect(() => {
        // 组件加载时，检查是否已经登录
        const userData:any = localStorage.getItem('user');
        console.log(userData);
        
        if (userData) {
            setUser((JSON.parse(userData))[0]);
            console.log('已经登录');
            

        }
    }, []);
    return (
        <>
        {contextHolder}
            <div style={{ width: '80%', margin: 'auto' }}>
                {
                    user ?
                        <>
                            <h4>授权登录</h4>
                            <p>此账号已经登录</p>
                            <img src={user? user.avatar:''} style={{ margin: '30px auto', width: '100px', borderRadius: '50%' }} />
                            <Button type="primary" className="login-form-button" style={{ margin: '30px 0' }}
                            onClick={() => {
                                navigator('/CXF')
                            }}
                            >
                                登录
                            </Button>
                            <a className="login-form-forgot" onClick={loginout}>
                                其他账号登录
                            </a>
                        </>
                        : <Form
                            name="login"
                            className="login-form"
                            initialValues={{ remember: true }}
                            onFinish={onFinish}
                        >
                            <h4>账号密码登录</h4>
                            <p>使用金山办公在线服务账号登录</p>
                            <Form.Item
                                name="username"
                                rules={[{ required: true, message: '用户名不能为空' }]}
                            >
                                <Input
                                    prefix={<UserOutlined className="site-form-item-icon" />}
                                    placeholder="请输入用户名" />
                            </Form.Item>
                            <Form.Item
                                name="password"
                                rules={[{
                                    required: true, 
                                    message: '密码不能为空',
                                }]}
                            >
                                <Input.Password
                                    prefix={<LockOutlined className="site-form-item-icon" />}
                                    type="password"
                                    placeholder="请输入密码"
                                />
                            </Form.Item>



                            <Form.Item>
                                <Button type="primary" htmlType="submit" className="login-form-button">
                                    登录
                                </Button>
                            </Form.Item>
                            <Form.Item>
                                <a href="/login/register">
                                    注册账号
                                </a>
                                <a className="login-form-forgot" href="/login/wang">
                                    忘记密码
                                </a>

                            </Form.Item>
                            <ThirdPartyLogin />
                        </Form>
                }
            </div>


        </>
    )
}
export default Account